<template>
  <section class="c-ph24 c-pv24" v-if="article">
    <div class="c-lh56 c-fs32 c-fc-xblack">
      {{article.title}}
    </div>
    <div class="c-flex-row c-aligni-center c-flexw-wrap c-justify-sb c-pt30 c-pb40">
      <div class="c-flex-row c-aligni-center" v-if="article.isShowAccount">
        <img class="c-ww48 c-hh48 c-brp50" :src="companyLogo" alt="">
        <div class="c-lh32 c-fs22 c-fc-gray c-ml20">
          {{companyName}}
        </div>
      </div>
      <div class="c-lh32 c-fs22 c-fc-gray c-textAlign-r c-pv8">
        <span v-if="article.isShowView">{{formatNumber(article.views)}}次浏览</span><span class="c-ph4" v-if="article.isShowTime"><span v-if="article.isShowView">|</span>{{getTime(article.issuedAt)}}</span>
      </div>
    </div>
    <div class="c-fs24 c-fc-sblack tinymce-text c-wb-ba" v-html="article.content"></div>
    <div class="c-ww170 c-pv16 c-ph8 c-br40 c-fs28 c-flex-row c-aligni-center c-textAlign-c c-center c-mt40 c-mb40 transition" @click="setArticleLike" :class="article.isLike ? 'c-bg-f2 theme-fc' : 'theme-bg c-fc-white'">
      <span class="iconfont c-fs28 c-mr8">&#xe6f9;</span><span v-if="article.isShowLike">{{formatNumber(likesNum)}}</span>
    </div>
  </section>
</template>
<script>
import { utilJs } from "@/utils/common.js";
let isClick = false;
export default {
  name: "ArticleDetail",
  data() {
    return {
      cfg: JSON.parse(localStorage.getItem("cfg")),
      article: null,
      caId: '',
      likesNum: 0, // 点赞数
      companyName: localStorage.getItem("companyName") ? localStorage.getItem("companyName") : '',
      companyLogo: localStorage.getItem("shareLogo") ? localStorage.getItem("shareLogo") : '',
      shareSetting: null, // 分享语设置
    };
  },
  watch: {
    $route(to, from) {
      if (to.path == "/homePage/article/articleDetail" && from.path == "/homePage/article/articleDetail") {
        this.initData();
      }
    }
  },
  created() {
  },
  activated() {
    setDocumentTitle("文章详情");// eslint-disable-line
    this.initData();
  },
  computed: {
    getTime() {
      return function (date) {
        let time = new Date(date.replace(/-/g, "/"));
        return `${time.getFullYear()}年${time.getMonth() + 1}月${time.getDate()}日`
      }
    },
    formatNumber() {
      return function(value) {
        let strNum = '';
        if (value != '' && Number(value) >= 0) {
          let n = Number(value);
          if (n > 1000000) {
            return '100万+'
          } else if (n > 9999) {
            strNum = Number(n / 10000).toFixed(1) + '万';
          } else {
            strNum = n;
          }
        } else {
          strNum = 0;
        }
        return strNum;
      }
    }
  },
  methods: {
    initData() {
      isClick = false;
      this.caId = this.$route.query.caId || '';
      this.article = null;
      this.shareSetting = null;
      this.getArticle();
    },
    getArticle() {
      utilJs.getMethod(global.apiurl + "companyArticle/getArticle?caId=" + this.caId, (res) => {
        if (res.status != 1) {
          this.$routerGo(this, "replace", {
            path: "/error/emptyPage",
            query: {
              from: "article",
              info: '该文章暂不存在'
            }
          });
          return;
        }
        this.article = res;
        this.likesNum = res.likes;
        this.shareSetting = res.shareSetting || null;
        setDocumentTitle(res.title);// eslint-disable-line
        this.wechatShare();
        utilJs.appShare(this);
      });
    },
    setArticleLike() {
      if (isClick) return
      let data = {
        caId: this.caId,
        type: this.article.isLike == 0 ? 1 : 2
      }
      utilJs.postMethod(global.apiurl + "companyArticle/setArticleLike", data, (res) => {
        this.$set(this.article, 'isLike', this.article.isLike == 0 ? 1 : 0);
        this.$showCjToast({
          text: this.article.isLike == 1 ? "您已点赞" : "您已取消点赞",
          type: "success",
        });
        this.likesNum = res.likes;
        isClick = true;
        setTimeout(() => {
          isClick = false;
        }, 1000)
      });
    },
    //分享
    wechatShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.article.title || window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.article.shareUrl || window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?caId=${this.caId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareSetting.shareDesc ? this.shareSetting.shareDesc : "点击查看详情";
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.shareSetting ? this.shareSetting.shareTitle : (this.article.title || window.localStorage.getItem("shareTitle"));
      let shareImg = this.shareSetting ? this.shareSetting.sharePic : (this.article.shareUrl || window.localStorage.getItem("shareLogo"));
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?caId=${this.caId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.shareSetting.shareDesc ? this.shareSetting.shareDesc : "点击查看详情";
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
};
</script>
<style lang="scss">
.transition {
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}
</style>